<template>  
<!-- 这个是用了一些映射 -->
  <div ref="chart" class="chart-container "></div>  
</template>  

<script>  
import * as echarts from 'echarts';  
import { handleMapClick } from './mapHandler'
// 导入省份映射  
import provinceMaps from './provinceMaps'; // 引入新的映射文件 
import chinaMap from './china.json'; // 这里导入中国地图的 JSON 数据  
// 省份  
import guangdongMap from './json(省份)/guangdong.json';   // 导入广东数据
import beijingMap from './json(省份)/beijing.json';   // 导入北京数据
import tianjinMap from './json(省份)/tianjin.json';   // 导入天津数据
import shanghaiMap from './json(省份)/shanghai.json';   // 导入上海数据
import chongqingMap from './json(省份)/chongqing.json';   // 导入上海数据
import henanMap from './json(省份)/henan.json';   // 导入上海数据
// 这里是单个的引入
// echarts.registerMap('china', chinaMap); // 注册地图  
// echarts.registerMap('guangdong', guangdongMap); // 注册广东省地图 
// 循环引入
// 地图注册信息  
const maps = {  
  china: chinaMap,  
  guangdong: guangdongMap,  
  beijing: beijingMap,  
  // 添加其他省份地图  
  tianjin: tianjinMap,  
  shanghai: shanghaiMap,  
  chongqing: chongqingMap,  
  henan: henanMap,  
  // 其他省份地图...  
};  
Object.keys(maps).forEach(mapName => {  
  echarts.registerMap(mapName, maps[mapName]); // 循环注册所有地图  
});  


export default {  
  name: 'ChinaMap',  
  data() {  
    return {  
      cityName:'',
      currentMap: 'china',// 保存当前地图状态  
      chart: null,  
      provinceMaps
      
    };  
  }, 
  methods: {  
    initChart() {  
      this.chart = echarts.init(this.$refs.chart);  
      const option = {  
        title: {  
          text:  `点击省份查看 ${this.currentMap === 'china' ? '各省份' : '具体'} 地图`, 
          subtext: '数据来源：示例',  
          left: 'center'  
        },  
        tooltip: {  
          trigger: 'item'  
        },  
        visualMap: {  
          min: 0,  
          max: 1000,  
          left: 'left',  
          top: 'bottom',  
          text: ['高', '低'], // 文本，默认不显示  
          calculable: true,  
          inRange: {  
            color: ['#f4e9d9', '#fba1a1'] // 颜色渐变  
          },  
          outOfRange: {  
            color: ['#ddd']  
          }  
        },  
        series: [  
          {  
            name: '随机数据',  
            type: 'map',  
            map: this.currentMap,  
            roam: true,  
            itemStyle: {  
              emphasis: {  
                label: {  
                  show: true  
                }  
              }  
            },  
            label: {  
              normal: {  
                show: true // 默认显示省份名称  
              },  
              emphasis: {  
                show: true // 鼠标悬浮时显示省份名称  
              }  
            },  
            data: [//这是数据，500以内的随机数
                {id:1, name: "北京", value: "100" },
                {id:2, name: "天津", value: Math.round(Math.random() * 500) },
                {id:3, name: "上海", value: Math.round(Math.random() * 500) },
                {id:4, name: "重庆", value: Math.round(Math.random() * 500) },
                {id:5, name: "河北", value: Math.round(Math.random() * 500) },
                {id:6, name: "河南", value: Math.round(Math.random() * 500) },
                {id:7, name: "云南", value: Math.round(Math.random() * 500) },
                {id:8, name: "辽宁", value: Math.round(Math.random() * 500) },
                {id:9, name: "黑龙江", value: Math.round(Math.random() * 500) },
                {id:10, name: "湖南", value: Math.round(Math.random() * 500) },
                {id:11, name: "安徽", value: Math.round(Math.random() * 500) },
                {id:12, name: "山东", value: Math.round(Math.random() * 500) },
                {id:13, name: "新疆", value: Math.round(Math.random() * 500) },
                {id:14, name: "江苏", value: Math.round(Math.random() * 500) },
                {id:15, name: "浙江", value: Math.round(Math.random() * 500) },
                {id:16, name: "江西", value: Math.round(Math.random() * 500) },
                {id:17, name: "湖北", value: Math.round(Math.random() * 500) },
                {id:18, name: "广西", value: Math.round(Math.random() * 500) },
                {id:19, name: "甘肃", value: Math.round(Math.random() * 500) },
                {id:20, name: "山西", value: Math.round(Math.random() * 500) },
                {id:21, name: "内蒙古", value: Math.round(Math.random() * 500) },
                {id:22, name: "陕西", value: Math.round(Math.random() * 500) },
                {id:22, name: "吉林", value: Math.round(Math.random() * 500) },
                {id:23, name: "福建", value: Math.round(Math.random() * 500) },
                {id:24, name: "贵州", value: Math.round(Math.random() * 500) },
                {id:25, name: "广东", value: Math.round(Math.random() * 500) },
                {id:26, name: "青海", value: Math.round(Math.random() * 500) },
                {id:27, name: "西藏", value: Math.round(Math.random() * 500) },
                {id:28, name: "四川", value: Math.round(Math.random() * 500) },
                {id:29, name: "宁夏", value: Math.round(Math.random() * 500) },
                {id:30, name: "海南", value: Math.round(Math.random() * 500) },
                {id:31, name: "台湾", value: Math.round(Math.random() * 500) },
                {id:32, name: "香港", value: Math.round(Math.random() * 500) },
                {id:33, name: "澳门", value: Math.round(Math.random() * 500) }
           ] //
          }  
        ]  
      };  

    this.chart.setOption(option);  
    // 添加点击事件  
    // this.chart.on('click', (params) => {  
    //     if (params.componentType === 'series') {
    //       this.handleMapClick(params.name);  
    //     }  
    //   });  
     // 直接在这里写点击事件  
  this.chart.on('click', (params) => {  
    if (params.componentType === 'series') {  
       const cityName = params?.name // 获取名字
       this.onMapClick(cityName)
    }  
  }); 
      window.addEventListener('resize',  this.chart.resize); // 处理窗口大小变化  
    } ,

    onMapClick(name) {  
      handleMapClick(name, this); // 传递上下文  
    } 
  },  
  mounted() {  
    this.initChart();  
  },  
  beforeUnmount() {  
    window.removeEventListener('resize', this.chart.resize);  
  },  
};  
</script>  
<style scoped>
.chart-container {  
  width: 874px; /* 宽度撑满父容器 */  
  height: 100vh; /* 高度可以设置为 100vh 或其他值 */  
} 
</style>
